<script setup>
import { ref, h, reactive } from 'vue'
import { NButton, NSpace } from 'naive-ui'
import { Add24Regular as AddIcon } from "@vicons/fluent";

const tableObj = reactive({
  loading: false,
  columns: [
    {
      title: 'ID',
      key: 'id',
      align: 'center'
    },
    {
      title: '姓名',
      key: 'name',
      align: 'center'
    },
    {
      title: '手机号',
      key: 'phone',
      align: 'center'
    },
    {
      title: '专业',
      key: 'major',
      align: 'center'
    },
    {
      title: '权限',
      key: 'permisson',
      align: 'center'
    },
    {
      title: '操作',
      align: 'center',
      key: 'actions',
      render: (row) =>
        h(NSpace, { justify: "center" }, () => [
          h(NButton, {
            type: 'primary', onClick: () => { dialog.show = true }
          }, () => '编辑'),
          h(NButton, { type: 'warning' }, () => '停用'),
        ])

    },
  ],
  data: [
    { id: 1, name: '张三', phone: '1333333333333', major: '汽机', permisson: '管理员' }
  ],
  pagination: {
    defaultPage: 1
  }
})

const dialog = reactive({
  type: 0,//0-编辑 1-新增
  show: false,
  data: {},
  handlePositiveClick: () => { },
  handleNegativeClick: () => { },
})
</script>
<template>
  <div>
    <n-flex justify="space-between">
      <n-h2>{{ $route.meta.label }}</n-h2>
      <n-button type="primary">
        <n-flex>添加
          <n-icon>
            <AddIcon />
          </n-icon>
        </n-flex></n-button>
    </n-flex>
    <n-data-table :loading="tableObj.loading" :columns="tableObj.columns" :data="tableObj.data" :bordered="false"
      :pagination="tableObj.pagination" />

    <n-modal :mask-closable="false" v-model:show="dialog.show" preset="dialog" title="确认" content="你确认?"
      positive-text="确认" negative-text="算了" @positive-click="dialog.handlePositiveClick"
      @negative-click="dialog.handleNegativeClick" />
  </div>
</template>